<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title> 筑为智慧-建企经营管理系统 - 筑为科技 </title>
    <script src='/static/component/jquery_3.3.1.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/4.2.0/fabric.js"></script>
</head>

<body>
<button onclick="downloadFabric(canvas, new Date().getTime())">导出</button>
<div style="text-align: center">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</div>


<script>
    const canvas = new fabric.Canvas('canvas');
    canvas.setWidth(1000);
    canvas.setHeight(800);




    // 方式二（通过图片路径添加）
    fabric.Image.fromURL('xxx.jpg', (img) => {
        img.set({
            left: 100, // 图片相对画布的左侧距离
            top: 100, // 图片相对画布的顶部距离
            opacity: 1, // 图片透明度
            // 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半
            scaleX: 1,
            scaleY: 1
        });
        // 添加对象
        canvas.add(img);
    });

    fabric.Image.fromURL('yyy.png', (img) => {
        img.set({
            left: 100, // 图片相对画布的左侧距离
            top: 100, // 图片相对画布的顶部距离
            // 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半
            scaleX: 0.5,
            scaleY: 0.5
        });
        // 添加对象
        canvas.add(img);
    });


    function download(url,name){
        $('<a>').attr({href:url,download:name})[0].click();
    }
    function downloadFabric(canvas,name){
        download(canvas.toDataURL(),name+'.png');
    }

</script>
</body>
</html>




